<!DOCTYPE html>
<html>
  <head>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{msg}}</p>
      <div v-show="showInput">
       <p>请选择自己的性别：</p>
        <input  type="radio" name="sex" value="man"/>男
        <input  type="radio" name="sex" value="women"/>女
      </div>
      <div v-if="showInput">
        <input  type="radio" name="sex" value="man"/>男
        <input  type="radio" name="sex" value="women"/>女
      </div>
      <div v-else>
        <p>请自行输入自己的性别：</p>
        <input v-bind:value="sex" type="text" placeholder="请输入其他内容" />
        <input :value="sex" :type="button"/>
      </div>
      <input type="button" value="click me" v-on:click="clikeme">
      <input type="button" value="显示/隐藏内容" @click="showInput=!showInput">
      <div>
        <input type="text" v-model="inputText" placeholder="请输入内容"/>
        <input type="text" v-model="inputText" placeholder="请输入内容"/>
        <p>{{inputText|checkIsNullorEmpty}}</p>
      </div>
      <div>
        <input v-model="sexText" type="radio" name="sex" value="man">男
        <input v-model="sexText" type="radio" name="sex" value="women">女
        <p>您选择的性别为：{{sexText}}</p>
        <p>您选择的性别为：{{sexText|sexFilter}}</p>
      </div>
      <div>
        <p v-for="(a,b) in dataList">{{b}},{{a}}</p>
        <p v-for="a in dataList">{{a}}</p>
      </div>
      <div>
        <select v-model="selectValue" name="name" id="name">
          <option v-for="(item,index) in dataList" :value="index">{{item}}</option>
        </select>
        <p>选中的用户:{{selectValue|selectFilter(dataList)}}</p>
      </div>
      <div>
        <p>{{count}}</p>
        <p>{{count|all}}</p>
        <input type="button" value="add add" @click="addval">

      </div>
    </div>
    <script>
      Vue.filter('all',function (value) {
    return value=value + value
 });

    console.log("1111")
    const vm = new Vue({
      el: '#app', //el代表vue主体
        //eslint编码规范
        //定义参数的时候，值必须用单引号
        //方法名和括号之间需要一个空格
        //如果有多个参数，逗号后面需要一个空格
        data(){
          return {
              msg:'这是一段信息',
              showInput:true,
              sex: '我也不知道',
              button: 'button',
              inputText:'',
              sexText:'',
              dataList:[
                  '植物园',
                  '动物园',
                  '博物馆'
              ],
              selectValue:null,
              count:0
          }
        },
        methods:{
          clikeme(){
              console.log("abcd")
          },
          addval(){
            return this.count=this.count+1
          }
        },

        filters:{
            // 有参过滤器，有参过滤器的参数是被修饰的那个值自身+传递的参数
            selectFilter:function (sid,dataList) {
                console.log('sid:',sid)
                console.log(dataList)
                return dataList[sid]
            },
            // 无参过滤器，无参过滤器的参数是被修饰的那个值自身
            checkIsNullorEmpty(val){
                if(val===null||val===''){
                   return '暂无数据显示'
                }else {
                    return val
                }
            },
            sexFilter(sex){
                if(sex==='man'){
                    return '男性'
                }
                else if (sex==='women'){
                    return '女性'
                }
            }
        }
    })
    </script>
  </body>
</html>